<template>
  <div id="demo"  style="margin :10px">
    <div v-show="panel" class="father">
      <div class="container mobile-container">
        <div style="margin-top:1%;margin-left: 1%;margin-right: 1%;height: 85%;" >
          <img ref="image" :src="url" alt="Picture" />
        </div>
        <div>
          <div style="float: right;margin-right: 1%;margin-top:5px">
            <div style="float: left;margin-right: 50px;">若不需裁剪请关闭本页面,在'图库中选择'里点击'上传'按钮</div>
            <el-button icon="el-icon-zoom-out" size="mini" circle @click="zoom(-1)" />
            <el-button icon="el-icon-zoom-in" size="mini" circle @click="zoom(1)" />
            <el-button icon="el-icon-refresh" size="mini" circle @click="rotate" />
            <el-button type="success" icon="el-icon-check" size="mini" circle @click="crop" />
            <el-button type="danger" icon="el-icon-close" size="mini" circle @click="panel=false" />
          </div>
        </div>
      </div>
    </div>
    <div>
      <div style="margin-top:20px;">
        <input ref="change" type="file" accept="image" style="display:none;" @change="change" />
        <div
          class="show"
          :style="'backgroundImage:url('+headerImage+');border: 1px dashed '+color +' ; width: '+width+'px;height: '+height+'px;border-radius: '+(width/height>1?'5':'10')+'%;'"
          @mouseover="addClassload"
          @mouseout="removeClassload"
          @click="upload"
        >
          <i class="el-icon-plus i show_i" :style="'color: '+color" />
        </div>
      </div>
    </div>
    <el-link type="success" icon="el-icon-picture-outline" @click="dialogVisible=true">图库中选择</el-link>
    <el-dialog title="图库" :visible.sync="dialogVisible" :width="isMobile()?'100%':'60%'">
      <picture-library @onClick="onClick" :append="append"/>
    </el-dialog>
    <!-- <drawer title="选择图库" :isShow="dialogVisible"  @update:isShow="dialogVisible=false" width=".4" :append="append">
        <picture-library @onClick="onClick" />
    </drawer> -->
  </div>
</template>

<script>
import Cropper from "cropperjs";
import PictureLibrary from "@/components/UploadPic/PictureLibrary";
export default {
  props: {
    width: {
      type: String,
      default: '100'
    },
    height: {
      type: String,
      default: '100'
    },
    thumb: {
      type: String,
      default: ""
    },
    max_size: {
      type: Number,
      default: 512
    },
    cate_id: {
      type: String,
      default: "2"
    },
    append: { //在多层中弹出
      type: Boolean,
      default: false
    },
  },
  components: {PictureLibrary},
  data() {
    return {
      headerImage: "",
      filename: undefined,
      picValue: "",
      cropper: "",
      croppable: false,
      dialogVisible: false,
      panel: false,
      panel: false,
      url: "",
      color: "#d9d9d9",
      current: 0
    };
  },
  mounted() {
    // 初始化这个裁剪框
    this.headerImage = this.thumb;
    var self = this;

    // var image = document.getElementById("image");
    var image = this.$refs.image;

    this.cropper = new Cropper(image, {
      aspectRatio: Number(self.width) / Number(self.height), // 裁剪比例
      viewMode: 1,
      autoCropArea: 1,
      dragMode : 'move',
      zoomOnWheel: true, // 是否允许通过鼠标滚轮来缩放图片
      background: true, // 是否在容器上显示网格背景
      rotatable: true, // 是否允许旋转图片
      ready: function() {
        self.croppable = true;
      }
    });
  },
  methods: {
    addClassload() {
      this.color = "#1b95e0";
    },
    removeClassload() {
      this.color = "#d9d9d9";
    },
    // 点击按钮自动执行选择文件事件
    upload() {
      this.url = "";
      this.current = 0;
      // document.getElementById("change").value = null;
      // document.getElementById("change").click();
      this.$refs.change.value=null
      this.$refs.change.click()
    },
    // 旋转
    rotate() {
      // alert(this.cropper.image)
      this.current = (this.current + 90) % 360;
      this.cropper.rotate(this.current);
    },
    // 缩放
    zoom(num) {
      num = num || 1;
      this.cropper.zoom(num);
    },

    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL !== undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    change(e) {
        this.filename=e.target.files[0].name
    //   console.log(e.target.files[0], "图片大小");
      // if (e.target.files[0].size > 500000) {
      //   this.$message.error('图片过大，请重新选择图片')
      //   return
      // } else {
      //   const files = e.target.files || e.dataTransfer.files
      //   if (!files.length) return
      //   this.panel = true
      //   this.picValue = files[0]
      //   this.url = this.getObjectURL(this.picValue)
      //   // 每次替换图片要重新得到新的url
      //   if (this.cropper) {
      //     this.cropper.replace(this.url)
      //   }
      //   // console.log(this.url)
      //   this.panel = true
      // }
      const files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      let ls=this.filename.split('.')

      if(ls[ls.length-1]=='gif'){
        const isLt2M = e.target.files[0].size  < this.max_size*1024
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 '+this.max_size+'KB!')
          return false
        }
        let formData = new FormData();
        formData.append('file',files[0]);
        this.upload_admin(formData)
        return
      }

      this.picValue = files[0];
      this.url = this.getObjectURL(this.picValue);

      
      
      // 每次替换图片要重新得到新的url
      if (this.cropper) {
        this.cropper.replace(this.url);
      }
      // console.log(this.url)
      this.panel = true;
    },
    crop() {
      this.panel = false;
      var croppedCanvas;
      if (!this.croppable) {
        return;
      }
      // Crop
      croppedCanvas = this.cropper.getCroppedCanvas();
      // console.log(this.cropper.url, '图片路径')// 图片路径
      // Round
      /* 截取圆形
        roundedCanvas = this.getRoundedCanvas(croppedCanvas);
        this.headerImage = roundedCanvas.toDataURL();
        */
      // 方形
      // croppedCanvas canvas的宽高
      let ls=this.filename.split('.')
      let seff=ls[ls.length-1]
      if(seff=='jpg'){
        seff='jpeg'
      }
      this.headerImage = croppedCanvas.toDataURL("image/"+seff);
      // console.log(this.headerImage, 'this.headerImage')
      // var gettype = Object.prototype.toString
      this.postImg();
    },
    dataURLtoFile(dataurl, filename = "file.jpeg") {
      const arr = dataurl.split(",");
      console.log(arr)
      const mime = arr[0].match(/:(.*?);/)[1];
      const suffix = mime.split("/")[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      
      const isLt2M = n  < this.max_size*1024
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 '+this.max_size+'KB!')
        return false
      }

      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}`, { type: mime });
    },
    /* // 截取圆形
      getRoundedCanvas (sourceCanvas) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;
        canvas.width = width;
        canvas.height = height;
        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0, width, height);
        context.globalCompositeOperation = 'destination-in';
        context.beginPath();
        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
        context.fill();
        return canvas;
      },*/
    postImg() {
      // 图片的上传
      var formData = new FormData();
      const file=this.dataURLtoFile(this.headerImage,this.filename)
      if(file){
        
          formData.append("file", file);
          formData.append('cate_id',this.cate_id);
           this.upload_admin(formData)
      }
      
    },
    upload_admin(formData){
      this.get("/" + this.$store.state.user.model + "/UploadFile/upload", formData, "POST").then(e => {
          this.$msg_ok("success", "上传成功");
          this.$emit('update:thumb', e.path);
      });

    },
    onClick(e){
      this.$emit('update:thumb',e);
      this.dialogVisible=false
    }
  },
  watch: {
    thumb: {
      handler(val, oldVal) {
        this.headerImage = val;
      }
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

@media (max-width: 550px) {
  .mobile-container {
    width: 100% !important;
    height: 80% !important;
    left: 0% !important;
    top: 20% !important;
  }
}

.father {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
}
.i {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
#demo .show {
  border: 1px dashed #d9d9d9;

  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-align: center;
  outline: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#demo .container {
  z-index: 99;
  height: 600px;
  width: 800px;
  position: fixed;
  /*padding-top: 60px;*/
  left: 30%;
  top: 20%;

  background-color: white;
}
#demo #image {
  max-width: 100%;
}
/* .cropper-view-box,.cropper-face {
    border-radius: 100%; 圆形截图设置
  }*/
/*!
   * Cropper.js v1.0.0-rc
   * https://github.com/fengyuanchen/cropperjs
   *
   * Copyright (c) 2017 Fengyuan Chen
   * Released under the MIT license
   *
   * Date: 2017-03-25T12:02:21.062Z
   */
.cropper-container {
  font-size: 0;
  line-height: 0;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: ltr;
  -ms-touch-action: none;
  touch-action: none;
}

.cropper-container img {
  /* Avoid margin top issue (Occur only when margin-top <= -height) */
  display: block;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
  height: 100%;
  image-orientation: 0deg;
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.cropper-wrap-box {
  overflow: hidden;
}
.cropper-drag-box {
  opacity: 0;
  background-color: #fff;
}
.cropper-modal {
  opacity: 0.5;
  background-color: #000;
}
.cropper-view-box {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
}

.cropper-dashed {
  position: absolute;
  display: block;
  opacity: 0.5;
  border: 0 dashed #eee;
}
.cropper-dashed.dashed-h {
  top: 33.33333%;
  left: 0;
  width: 100%;
  height: 33.33333%;
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333%;
  width: 33.33333%;
  height: 100%;
  border-right-width: 1px;
  border-left-width: 1px;
}
.cropper-center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  opacity: 0.75;
}
.cropper-center:before,
.cropper-center:after {
  position: absolute;
  display: block;
  content: " ";
  background-color: #eee;
}
.cropper-center:before {
  top: 0;
  left: -3px;
  width: 7px;
  height: 1px;
}
.cropper-center:after {
  top: -3px;
  left: 0;
  width: 1px;
  height: 7px;
}
.cropper-face,
.cropper-line,
.cropper-point {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}
.cropper-face {
  top: 0;
  left: 0;
  background-color: #fff;
}
.cropper-line {
  background-color: #39f;
}
.cropper-line.line-e {
  top: 0;
  right: -3px;
  width: 5px;
  cursor: e-resize;
}
.cropper-line.line-n {
  top: -3px;
  left: 0;
  height: 5px;
  cursor: n-resize;
}
.cropper-line.line-w {
  top: 0;
  left: -3px;
  width: 5px;
  cursor: w-resize;
}
.cropper-line.line-s {
  bottom: -3px;
  left: 0;
  height: 5px;
  cursor: s-resize;
}
.cropper-point {
  width: 5px;
  height: 5px;

  opacity: 0.75;
  background-color: #39f;
}
.cropper-point.point-e {
  top: 50%;
  right: -3px;
  margin-top: -3px;
  cursor: e-resize;
}
.cropper-point.point-n {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize;
}
.cropper-point.point-w {
  top: 50%;
  left: -3px;
  margin-top: -3px;
  cursor: w-resize;
}
.cropper-point.point-s {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: s-resize;
}
.cropper-point.point-ne {
  top: -3px;
  right: -3px;
  cursor: ne-resize;
}
.cropper-point.point-nw {
  top: -3px;
  left: -3px;
  cursor: nw-resize;
}
.cropper-point.point-sw {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize;
}
.cropper-point.point-se {
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  opacity: 1;
}
@media (min-width: 768px) {
  .cropper-point.point-se {
    width: 15px;
    height: 15px;
  }
}
@media (min-width: 992px) {
  .cropper-point.point-se {
    width: 10px;
    height: 10px;
  }
}
@media (min-width: 1200px) {
  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    opacity: 0.75;
  }
}
.cropper-point.point-se:before {
  position: absolute;
  right: -50%;
  bottom: -50%;
  display: block;
  width: 200%;
  height: 200%;
  content: " ";
  opacity: 0;
  background-color: #39f;
}
.cropper-invisible {
  opacity: 0;
}
.cropper-bg {
  background-image: url("");
}
.cropper-hide {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
}
.cropper-hidden {
  display: none !important;
}
.cropper-move {
  cursor: move;
}
.cropper-crop {
  cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}
.flex_row {
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.show{
  position: relative;
}
.show_i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

